<template>
    <div style="margin-left: 300px; width: 300px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色:" prop="id">
                <el-select v-model="form.roleId" clearable placeholder="请选择角色">
                    <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { roleList } from "@/api/user";
import { setUpRole } from "@/api/user";
export default {
    props: {
        id: Number,
    },
    data() {
        return {
            form: {},
            rules: {
                roleId: [
                    { required: true, message: "请选择角色", trigger: "change" },
                ],
            },
            roleList: [],
        };
    },
    methods: {
        //获取角色列表
        getRoleList() {
            roleList().then((res) => {
                this.roleList = res.data
            });
        },
        //设置
        setUpRoles() {
            this.form.userId = this.id;
            setUpRole(this.form).then(res => {
                if (res) {
                    this.$message.success("设置成功")
                } else {
                    this.$message.error("设置失败")
                }
            })
        }
    },
    created() {
        this.getRoleList();
    },
};
</script>
<style></style>